:root {
  --step-tag-size: 20px;
  --step-tag-background: #9e9e9e;
  --step-tag-font-size: var(--font-size-md);
  --step-tag-color: var(--color-on-primary);
  --step-tag-active-color: var(--color-primary);
  --step-tag-margin: 4px 0;
  --step-tag-icon-size: var(--font-size-lg);
  --step-content-font-size: var(--font-size-md);
  --step-content-color: rgba(0, 0, 0, 0.38);
  --step-content-active-color: #000;
  --step-line-background: #000;
  --step-line-gap: 8px;
  --step-vertical-tag-margin: 0 4px;
  --step-vertical-min-height: 50px;
}

// Mixins
.var-step-tag {
  width: var(--step-tag-size);
  height: var(--step-tag-size);
  background: var(--step-tag-background);
  display: flex;
  font-size: var(--step-tag-font-size);
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--step-tag-color);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: 0.3s var(--cubic-bezier);
}

// Mixins
.var-step-content {
  font-size: var(--step-content-font-size);
  color: var(--step-content-color);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: 0.3s var(--cubic-bezier);
}

.var-step {
  position: relative;
  flex: 1;
  -webkit-tap-highlight-color: transparent;

  &:last-child {
    .var-step__horizontal-line {
      width: 0;
    }

    .var-step__vertical-line {
      height: 0;
    }
  }

  &__horizontal {
    display: flex;
    flex-direction: column;
    align-items: center;

    &-tag {
      margin: var(--step-tag-margin);
      .var-step-tag();

      &--active {
        background: var(--step-tag-active-color);
      }
    }

    &-content {
      .var-step-content();

      &--active {
        color: var(--step-content-active-color);
      }
    }

    &-line {
      position: absolute;
      top: calc(calc(var(--step-tag-size) + var(--step-line-gap)) / 2);
      left: calc(50% + calc(var(--step-tag-size) + var(--step-line-gap)) / 2);
      width: calc(100% - calc(var(--step-tag-size) + var(--step-line-gap)));
      height: 1px;
      transform: scaleY(0.5);
      background: var(--step-line-background);
    }
  }

  &__vertical {
    display: flex;
    height: 100%;
    min-height: var(--step-vertical-min-height);

    &-tag {
      flex-shrink: 0;
      margin: var(--step-vertical-tag-margin);
      .var-step-tag();

      &--active {
        background: var(--step-tag-active-color);
      }
    }

    &-content {
      .var-step-content();

      &--active {
        color: var(--step-content-active-color);
      }
    }

    &-line {
      position: absolute;
      height: calc(100% - calc(var(--step-tag-size) + var(--step-line-gap)));
      left: calc(calc(var(--step-tag-size) + var(--step-line-gap)) / 2);
      top: calc(calc(var(--step-tag-size) + var(--step-line-gap)) - var(--step-line-gap) / 2);
      width: 1px;
      transform: scaleX(0.5);
      background: var(--step-line-background);
    }
  }

  &__icon[var-step-cover] {
    font-size: var(--step-tag-icon-size);
  }
}
